"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Alert, AlertDescription } from "@/components/ui/alert"
import {
  ArrowLeft,
  BarChart3,
  TrendingUp,
  Users,
  DollarSign,
  Target,
  Search,
  Building,
  Globe,
  Rocket,
  Brain,
  PieChart,
  Download,
  Share2,
  FileText,
  CheckCircle,
  AlertCircle,
  Sparkles,
  Award,
  Shield,
  Zap,
  Clock
} from "lucide-react"

interface CompetitorData {
  name: string
  description: string
  website: string
  marketShare: number
  revenue: string
  employees: string
  founded: string
  headquarters: string
  keyProducts: string[]
  strengths: string[]
  weaknesses: string[]
  pricing: string
  targetMarket: string
  recentNews: string[]
  fundingRounds: Array<{
    round: string
    amount: string
    date: string
    investors: string[]
  }>
  swotAnalysis: {
    strengths: string[]
    weaknesses: string[]
    opportunities: string[]
    threats: string[]
  }
}

interface IndustryAnalysis {
  industryOverview: {
    marketSize: string
    growthRate: string
    keyTrends: string[]
    marketSegments: Array<{
      name: string
      size: string
      growth: string
    }>
  }
  competitiveAnalysis: {
    topCompetitors: CompetitorData[]
    marketLeaders: string[]
    emergingPlayers: string[]
    competitiveFactors: string[]
  }
  marketTrends: {
    currentTrends: string[]
    emergingTechnologies: string[]
    consumerBehavior: string[]
    regulatoryChanges: string[]
  }
  opportunities: {
    marketGaps: string[]
    underservedSegments: string[]
    innovationAreas: string[]
    partnerships: string[]
  }
  risks: {
    marketRisks: string[]
    technologicalRisks: string[]
    regulatoryRisks: string[]
    competitiveRisks: string[]
  }
  recommendations: {
    entryStrategy: string[]
    competitivePositioning: string[]
    productDevelopment: string[]
    marketingStrategy: string[]
  }
}

export default function IndustryAnalysisPage() {
  const router = useRouter()
  const [currentStep, setCurrentStep] = useState(1)
  const [loading, setLoading] = useState(false)
  const [analysis, setAnalysis] = useState<IndustryAnalysis | null>(null)
  const [currentUser, setCurrentUser] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(true)
  
  // 表单数据
  const [formData, setFormData] = useState({
    industry: "",
    analysisScope: "",
    targetMarket: "",
    geographicScope: "",
    competitorList: ""
  })

  const industries = [
    { id: "fintech", name: "金融科技", icon: DollarSign, description: "数字支付、网贷、保险科技等" },
    { id: "ecommerce", name: "电商零售", icon: Building, description: "在线购物、新零售、社交电商等" },
    { id: "healthcare", name: "医疗健康", icon: Shield, description: "数字医疗、生物技术、医疗器械等" },
    { id: "edtech", name: "教育科技", icon: Brain, description: "在线教育、职业培训、教育软件等" },
    { id: "saas", name: "SaaS软件", icon: Rocket, description: "企业软件、云计算、数据分析等" },
    { id: "ai", name: "人工智能", icon: Sparkles, description: "机器学习、自然语言处理、计算机视觉等" },
    { id: "iot", name: "物联网", icon: Zap, description: "智能硬件、工业互联网、智慧城市等" },
    { id: "blockchain", name: "区块链", icon: Award, description: "加密货币、去中心化应用、数字资产等" },
    { id: "entertainment", name: "文娱传媒", icon: PieChart, description: "短视频、游戏、直播、内容创作等" },
    { id: "logistics", name: "物流运输", icon: Target, description: "快递配送、供应链管理、智慧物流等" },
    { id: "energy", name: "新能源", icon: BarChart3, description: "清洁能源、新能源汽车、储能技术等" },
    { id: "food", name: "食品餐饮", icon: Users, description: "新餐饮、食品科技、农业科技等" }
  ]

  const steps = [
    { number: 1, title: "选择行业", description: "选择您要分析的目标行业" },
    { number: 2, title: "分析范围", description: "设定分析的具体范围和目标" },
    { number: 3, title: "竞品识别", description: "列出主要竞争对手" },
    { number: 4, title: "分析报告", description: "查看AI生成的详细分析" }
  ]

  const handleNext = () => {
    if (currentStep < 4) {
      setCurrentStep(currentStep + 1)
    }
  }

  const handlePrevious = () => {
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1)
    }
  }

  const handleGenerateAnalysis = async () => {
    setLoading(true)
    
    // 模拟AI分析过程
    setTimeout(() => {
      const mockAnalysis: IndustryAnalysis = {
        industryOverview: {
          marketSize: "2,850亿人民币",
          growthRate: "23.8%",
          keyTrends: [
            "移动支付普及率持续提升",
            "监管政策逐步完善",
            "技术创新驱动行业发展",
            "数字化转型加速"
          ],
          marketSegments: [
            { name: "移动支付", size: "1,200亿", growth: "28%" },
            { name: "网络借贷", size: "890亿", growth: "15%" },
            { name: "数字银行", size: "560亿", growth: "35%" },
            { name: "保险科技", size: "200亿", growth: "42%" }
          ]
        },
        competitiveAnalysis: {
          topCompetitors: [
            {
              name: "蚂蚁集团",
              description: "全球领先的金融科技公司",
              website: "antgroup.com",
              marketShare: 35.2,
              revenue: "1,206亿人民币",
              employees: "18,000+",
              founded: "2004年",
              headquarters: "杭州",
              keyProducts: ["支付宝", "蚂蚁财富", "网商银行"],
              strengths: ["庞大用户基础", "技术创新能力", "生态系统完善"],
              weaknesses: ["监管压力", "国际化挑战"],
              pricing: "免费+增值服务",
              targetMarket: "C端用户+小微企业",
              recentNews: [
                "推出数字人民币钱包",
                "加强海外市场布局",
                "投资区块链技术"
              ],
              fundingRounds: [
                {
                  round: "IPO",
                  amount: "3,400亿美元估值",
                  date: "2020年",
                  investors: ["公开发行"]
                }
              ],
              swotAnalysis: {
                strengths: ["市场领导地位", "技术优势", "品牌影响力"],
                weaknesses: ["监管风险", "竞争加剧"],
                opportunities: ["国际化扩张", "B端市场"],
                threats: ["政策变化", "新进入者"]
              }
            },
            {
              name: "腾讯金融",
              description: "依托微信生态的金融服务",
              website: "tencent.com",
              marketShare: 28.5,
              revenue: "980亿人民币",
              employees: "12,000+",
              founded: "2005年",
              headquarters: "深圳",
              keyProducts: ["微信支付", "理财通", "微粒贷"],
              strengths: ["社交生态", "用户粘性", "数据优势"],
              weaknesses: ["金融业务相对分散", "盈利能力待提升"],
              pricing: "免费+佣金模式",
              targetMarket: "社交用户+线下商户",
              recentNews: [
                "推出企业微信支付",
                "拓展跨境支付业务",
                "加强风控体系建设"
              ],
              fundingRounds: [
                {
                  round: "内部孵化",
                  amount: "自有资金",
                  date: "2005年",
                  investors: ["腾讯集团"]
                }
              ],
              swotAnalysis: {
                strengths: ["社交生态优势", "用户基础庞大"],
                weaknesses: ["金融专业性", "监管合规"],
                opportunities: ["企业服务", "国际化"],
                threats: ["竞争对手", "政策风险"]
              }
            }
          ],
          marketLeaders: ["蚂蚁集团", "腾讯金融", "京东数科"],
          emergingPlayers: ["度小满", "滴滴金融", "美团金融"],
          competitiveFactors: ["技术创新", "用户体验", "监管合规", "生态建设"]
        },
        marketTrends: {
          currentTrends: [
            "央行数字货币(DCEP)试点推广",
            "开放银行API标准化",
            "人工智能在风控中的应用",
            "绿色金融产品创新"
          ],
          emergingTechnologies: [
            "区块链在供应链金融中的应用",
            "5G网络支持的实时支付",
            "生物识别技术安全升级",
            "量子计算在加密领域的探索"
          ],
          consumerBehavior: [
            "无现金支付习惯养成",
            "理财观念年轻化",
            "对金融安全要求提高",
            "个性化服务需求增长"
          ],
          regulatoryChanges: [
            "《网络安全法》实施细则",
            "数据保护法规完善",
            "金融科技监管沙盒试点",
            "反洗钱规定加强"
          ]
        },
        opportunities: {
          marketGaps: [
            "农村金融服务不足",
            "中小企业融资难题",
            "老年人数字金融服务",
            "跨境支付效率提升"
          ],
          underservedSegments: [
            "三四线城市用户",
            "传统制造业企业",
            "个体工商户",
            "新兴职业群体"
          ],
          innovationAreas: [
            "嵌入式金融服务",
            "数字资产管理",
            "智能投顾升级",
            "供应链金融数字化"
          ],
          partnerships: [
            "与传统银行深度合作",
            "联合电商平台拓展场景",
            "与政府部门共建基础设施",
            "国际金融机构技术合作"
          ]
        },
        risks: {
          marketRisks: [
            "经济周期波动影响",
            "市场饱和度提升",
            "用户增长放缓",
            "竞争加剧导致利润下降"
          ],
          technologicalRisks: [
            "网络安全威胁增加",
            "技术更新迭代风险",
            "数据泄露风险",
            "系统稳定性挑战"
          ],
          regulatoryRisks: [
            "监管政策不确定性",
            "合规成本上升",
            "牌照获取难度增加",
            "跨境业务限制"
          ],
          competitiveRisks: [
            "传统金融机构数字化转型",
            "新兴科技公司进入",
            "同质化竞争加剧",
            "价格战风险"
          ]
        },
        recommendations: {
          entryStrategy: [
            "选择细分领域深耕",
            "与传统机构合作进入",
            "技术创新差异化竞争",
            "监管合规优先考虑"
          ],
          competitivePositioning: [
            "专注特定用户群体",
            "构建技术护城河",
            "建设生态系统优势",
            "提升用户体验"
          ],
          productDevelopment: [
            "基于AI的个性化服务",
            "多场景金融产品设计",
            "安全性能持续优化",
            "用户界面简化升级"
          ],
          marketingStrategy: [
            "内容营销建立专业形象",
            "合作伙伴渠道拓展",
            "用户口碑传播机制",
            "数字化精准营销"
          ]
        }
      }
      
      setAnalysis(mockAnalysis)
      setLoading(false)
      setCurrentStep(4)
    }, 3000)
  }

  // 检查用户登录状态
  useEffect(() => {
    const user = localStorage.getItem('currentUser')
    if (!user) {
      alert('请先登录后使用此功能')
      router.push('/login')
      return
    }
    setCurrentUser(JSON.parse(user))
    setIsLoading(false)
  }, [router])

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="w-8 h-8 border-4 border-slate-300 border-t-slate-600 rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-slate-600">验证登录状态...</p>
        </div>
      </div>
    )
  }

  if (!currentUser) {
    return null
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <Button
            variant="ghost"
            className="mb-6"
            onClick={() => router.push("/")}
          >
            <ArrowLeft className="h-4 w-4 mr-2" />
            返回首页
          </Button>

          <div className="flex items-center gap-3 mb-8">
            <div className="p-2 bg-amber-500 text-white rounded-lg">
              <BarChart3 className="h-6 w-6" />
            </div>
            <div>
              <h1 className="text-3xl font-bold">行业产品解析</h1>
              <p className="text-gray-600">AI驱动的深度行业分析与竞争情报</p>
            </div>
          </div>

          {/* Progress */}
          <div className="mb-8">
            <div className="flex items-center justify-between mb-4">
              {steps.map((step, index) => (
                <div key={step.number} className="flex items-center">
                  <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
                    currentStep >= step.number 
                      ? 'bg-amber-500 text-white' 
                      : 'bg-gray-200 text-gray-600'
                  }`}>
                    {currentStep > step.number ? <CheckCircle className="h-4 w-4" /> : step.number}
                  </div>
                  {index < steps.length - 1 && (
                    <div className={`w-16 h-1 mx-2 ${
                      currentStep > step.number ? 'bg-amber-500' : 'bg-gray-200'
                    }`} />
                  )}
                </div>
              ))}
            </div>
            <div className="text-center">
              <h2 className="text-xl font-semibold mb-1">{steps[currentStep - 1].title}</h2>
              <p className="text-gray-600">{steps[currentStep - 1].description}</p>
            </div>
          </div>

          {/* Step 1: 选择行业 */}
          {currentStep === 1 && (
            <Card>
              <CardHeader>
                <CardTitle>选择目标行业</CardTitle>
                <p className="text-sm text-gray-600">请选择您要深度分析的行业领域</p>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  {industries.map((industry) => {
                    const IconComponent = industry.icon
                    return (
                      <Card 
                        key={industry.id} 
                        className={`cursor-pointer transition-all hover:shadow-md ${
                          formData.industry === industry.id ? 'ring-2 ring-amber-500 bg-amber-50' : ''
                        }`}
                        onClick={() => setFormData({ ...formData, industry: industry.id })}
                      >
                        <CardContent className="p-4">
                          <div className="flex items-center gap-3 mb-2">
                            <IconComponent className="h-6 w-6 text-amber-500" />
                            <h3 className="font-medium">{industry.name}</h3>
                          </div>
                          <p className="text-sm text-gray-600">{industry.description}</p>
                        </CardContent>
                      </Card>
                    )
                  })}
                </div>
                
                <div className="mt-6 flex justify-end">
                  <Button 
                    onClick={handleNext}
                    disabled={!formData.industry}
                    className="bg-amber-500 hover:bg-amber-600"
                  >
                    下一步
                  </Button>
                </div>
              </CardContent>
            </Card>
          )}

          {/* Step 2: 分析范围 */}
          {currentStep === 2 && (
            <Card>
              <CardHeader>
                <CardTitle>设定分析范围</CardTitle>
                <p className="text-sm text-gray-600">明确分析的具体范围和目标市场</p>
              </CardHeader>
              <CardContent className="space-y-6">
                <div>
                  <label className="block text-sm font-medium mb-2">分析重点 *</label>
                  <Textarea
                    placeholder="请描述您希望重点分析的产品类型、商业模式或特定领域..."
                    value={formData.analysisScope}
                    onChange={(e) => setFormData({ ...formData, analysisScope: e.target.value })}
                    rows={3}
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium mb-2">目标市场 *</label>
                  <Input
                    placeholder="如：B2B企业服务、C端消费者、小微企业等"
                    value={formData.targetMarket}
                    onChange={(e) => setFormData({ ...formData, targetMarket: e.target.value })}
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium mb-2">地域范围</label>
                  <Input
                    placeholder="如：中国市场、亚太地区、全球市场等"
                    value={formData.geographicScope}
                    onChange={(e) => setFormData({ ...formData, geographicScope: e.target.value })}
                  />
                </div>

                <Alert>
                  <Target className="h-4 w-4" />
                  <AlertDescription>
                    明确的分析范围有助于AI生成更精准的行业报告，建议聚焦在具体的细分领域。
                  </AlertDescription>
                </Alert>

                <div className="flex justify-between">
                  <Button variant="outline" onClick={handlePrevious}>
                    上一步
                  </Button>
                  <Button 
                    onClick={handleNext}
                    disabled={!formData.analysisScope || !formData.targetMarket}
                    className="bg-amber-500 hover:bg-amber-600"
                  >
                    下一步
                  </Button>
                </div>
              </CardContent>
            </Card>
          )}

          {/* Step 3: 竞品识别 */}
          {currentStep === 3 && (
            <Card>
              <CardHeader>
                <CardTitle>识别主要竞争对手</CardTitle>
                <p className="text-sm text-gray-600">列出您了解的主要竞争对手，我们将深度分析</p>
              </CardHeader>
              <CardContent className="space-y-6">
                <div>
                  <label className="block text-sm font-medium mb-2">竞争对手列表 *</label>
                  <Textarea
                    placeholder="请列出主要竞争对手，每行一个公司名称，如：&#10;阿里巴巴&#10;腾讯&#10;字节跳动&#10;美团&#10;..."
                    value={formData.competitorList}
                    onChange={(e) => setFormData({ ...formData, competitorList: e.target.value })}
                    rows={6}
                  />
                  <p className="text-xs text-gray-500 mt-2">
                    建议包含行业头部公司、直接竞争对手和新兴挑战者
                  </p>
                </div>

                <Alert>
                  <Brain className="h-4 w-4" />
                  <AlertDescription>
                    我们将基于您提供的竞争对手，深度分析其产品特色、商业模式、市场策略等关键信息，为您提供全面的竞争情报。
                  </AlertDescription>
                </Alert>

                <div className="flex justify-between">
                  <Button variant="outline" onClick={handlePrevious}>
                    上一步
                  </Button>
                  <Button 
                    onClick={handleGenerateAnalysis}
                    disabled={!formData.competitorList || loading}
                    className="bg-amber-500 hover:bg-amber-600"
                  >
                    {loading ? (
                      <>
                        <Clock className="h-4 w-4 mr-2 animate-spin" />
                        AI分析中...
                      </>
                    ) : (
                      "开始分析"
                    )}
                  </Button>
                </div>
              </CardContent>
            </Card>
          )}

          {/* Loading State */}
          {loading && (
            <Card>
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-600 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Brain className="w-8 h-8 text-white animate-pulse" />
                </div>
                <h3 className="text-xl font-semibold mb-2">AI正在深度分析...</h3>
                <p className="text-gray-600 mb-6">正在处理行业数据、竞争情报和市场趋势</p>
                <Progress value={66} className="w-full max-w-md mx-auto" />
                <p className="text-sm text-gray-500 mt-2">预计需要2-3分钟</p>
              </CardContent>
            </Card>
          )}

          {/* Step 4: 分析报告 */}
          {currentStep === 4 && analysis && (
            <div className="space-y-8">
              <div className="text-center">
                <div className="w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-600 rounded-full flex items-center justify-center mx-auto mb-4">
                  <BarChart3 className="w-8 h-8 text-white" />
                </div>
                <h2 className="text-2xl font-bold text-gray-900 mb-2">行业分析报告</h2>
                <p className="text-gray-600">基于AI算法生成的深度行业产品解析报告</p>
              </div>

              <Tabs defaultValue="overview" className="w-full">
                <TabsList className="grid w-full grid-cols-6">
                  <TabsTrigger value="overview">行业概览</TabsTrigger>
                  <TabsTrigger value="competitors">竞争分析</TabsTrigger>
                  <TabsTrigger value="trends">市场趋势</TabsTrigger>
                  <TabsTrigger value="opportunities">机会分析</TabsTrigger>
                  <TabsTrigger value="risks">风险评估</TabsTrigger>
                  <TabsTrigger value="recommendations">战略建议</TabsTrigger>
                </TabsList>

                <TabsContent value="overview" className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <Card>
                      <CardHeader>
                        <CardTitle className="flex items-center space-x-2">
                          <Globe className="w-5 h-5" />
                          <span>市场规模</span>
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="text-3xl font-bold text-amber-600 mb-2">
                          {analysis.industryOverview.marketSize}
                        </div>
                        <p className="text-sm text-gray-600">当前市场总规模</p>
                      </CardContent>
                    </Card>

                    <Card>
                      <CardHeader>
                        <CardTitle className="flex items-center space-x-2">
                          <TrendingUp className="w-5 h-5" />
                          <span>增长率</span>
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="text-3xl font-bold text-green-600 mb-2">
                          {analysis.industryOverview.growthRate}
                        </div>
                        <p className="text-sm text-gray-600">年复合增长率</p>
                      </CardContent>
                    </Card>
                  </div>

                  <Card>
                    <CardHeader>
                      <CardTitle>关键趋势</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {analysis.industryOverview.keyTrends.map((trend, index) => (
                          <div key={index} className="flex items-start space-x-3">
                            <div className="w-2 h-2 bg-amber-500 rounded-full mt-2 flex-shrink-0"></div>
                            <span className="text-sm">{trend}</span>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader>
                      <CardTitle>市场细分</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        {analysis.industryOverview.marketSegments.map((segment, index) => (
                          <div key={index} className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                            <div>
                              <h4 className="font-medium">{segment.name}</h4>
                              <p className="text-sm text-gray-600">市场规模：{segment.size}</p>
                            </div>
                            <Badge className="bg-green-100 text-green-800">
                              +{segment.growth}
                            </Badge>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                </TabsContent>

                <TabsContent value="competitors" className="space-y-6">
                  {analysis.competitiveAnalysis.topCompetitors.map((competitor, index) => (
                    <Card key={index}>
                      <CardHeader>
                        <div className="flex items-center justify-between">
                          <div>
                            <CardTitle className="flex items-center space-x-2">
                              <Building className="w-5 h-5" />
                              <span>{competitor.name}</span>
                            </CardTitle>
                            <p className="text-sm text-gray-600 mt-1">{competitor.description}</p>
                          </div>
                          <Badge className="bg-blue-100 text-blue-800">
                            市场份额 {competitor.marketShare}%
                          </Badge>
                        </div>
                      </CardHeader>
                      <CardContent>
                        <Tabs defaultValue="overview" className="w-full">
                          <TabsList className="grid w-full grid-cols-4">
                            <TabsTrigger value="overview">概览</TabsTrigger>
                            <TabsTrigger value="products">产品</TabsTrigger>
                            <TabsTrigger value="swot">SWOT</TabsTrigger>
                            <TabsTrigger value="news">动态</TabsTrigger>
                          </TabsList>

                          <TabsContent value="overview" className="mt-4">
                            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                              <div>
                                <h5 className="font-medium mb-2">基本信息</h5>
                                <div className="space-y-1 text-sm">
                                  <p><span className="text-gray-600">营收：</span>{competitor.revenue}</p>
                                  <p><span className="text-gray-600">员工：</span>{competitor.employees}</p>
                                  <p><span className="text-gray-600">成立：</span>{competitor.founded}</p>
                                  <p><span className="text-gray-600">总部：</span>{competitor.headquarters}</p>
                                </div>
                              </div>
                              <div>
                                <h5 className="font-medium mb-2">定价模式</h5>
                                <p className="text-sm">{competitor.pricing}</p>
                              </div>
                              <div>
                                <h5 className="font-medium mb-2">目标市场</h5>
                                <p className="text-sm">{competitor.targetMarket}</p>
                              </div>
                            </div>
                          </TabsContent>

                          <TabsContent value="products" className="mt-4">
                            <div>
                              <h5 className="font-medium mb-3">核心产品</h5>
                              <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
                                {competitor.keyProducts.map((product, idx) => (
                                  <Badge key={idx} variant="outline">{product}</Badge>
                                ))}
                              </div>
                            </div>
                          </TabsContent>

                          <TabsContent value="swot" className="mt-4">
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                              <div>
                                <h5 className="font-medium mb-3 text-green-700">优势 (Strengths)</h5>
                                <div className="space-y-2">
                                  {competitor.swotAnalysis.strengths.map((item, idx) => (
                                    <div key={idx} className="flex items-start space-x-2">
                                      <CheckCircle className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
                                      <span className="text-sm">{item}</span>
                                    </div>
                                  ))}
                                </div>
                              </div>
                              <div>
                                <h5 className="font-medium mb-3 text-red-700">劣势 (Weaknesses)</h5>
                                <div className="space-y-2">
                                  {competitor.swotAnalysis.weaknesses.map((item, idx) => (
                                    <div key={idx} className="flex items-start space-x-2">
                                      <AlertCircle className="w-4 h-4 text-red-500 mt-0.5 flex-shrink-0" />
                                      <span className="text-sm">{item}</span>
                                    </div>
                                  ))}
                                </div>
                              </div>
                            </div>
                          </TabsContent>

                          <TabsContent value="news" className="mt-4">
                            <div>
                              <h5 className="font-medium mb-3">最新动态</h5>
                              <div className="space-y-3">
                                {competitor.recentNews.map((news, idx) => (
                                  <div key={idx} className="flex items-start space-x-3 p-3 bg-gray-50 rounded-lg">
                                    <div className="w-2 h-2 bg-blue-500 rounded-full mt-2 flex-shrink-0"></div>
                                    <span className="text-sm">{news}</span>
                                  </div>
                                ))}
                              </div>
                            </div>
                          </TabsContent>
                        </Tabs>
                      </CardContent>
                    </Card>
                  ))}
                </TabsContent>

                <TabsContent value="trends" className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <Card>
                      <CardHeader>
                        <CardTitle>当前趋势</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-3">
                          {analysis.marketTrends.currentTrends.map((trend, index) => (
                            <div key={index} className="flex items-start space-x-3">
                              <TrendingUp className="w-4 h-4 text-green-500 mt-1 flex-shrink-0" />
                              <span className="text-sm">{trend}</span>
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>

                    <Card>
                      <CardHeader>
                        <CardTitle>新兴技术</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-3">
                          {analysis.marketTrends.emergingTechnologies.map((tech, index) => (
                            <div key={index} className="flex items-start space-x-3">
                              <Sparkles className="w-4 h-4 text-amber-500 mt-1 flex-shrink-0" />
                              <span className="text-sm">{tech}</span>
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </TabsContent>

                <TabsContent value="opportunities" className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <Card>
                      <CardHeader>
                        <CardTitle>市场空白</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-3">
                          {analysis.opportunities.marketGaps.map((gap, index) => (
                            <div key={index} className="flex items-start space-x-3">
                              <Target className="w-4 h-4 text-blue-500 mt-1 flex-shrink-0" />
                              <span className="text-sm">{gap}</span>
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>

                    <Card>
                      <CardHeader>
                        <CardTitle>创新领域</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-3">
                          {analysis.opportunities.innovationAreas.map((area, index) => (
                            <div key={index} className="flex items-start space-x-3">
                              <Rocket className="w-4 h-4 text-orange-500 mt-1 flex-shrink-0" />
                              <span className="text-sm">{area}</span>
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </TabsContent>

                <TabsContent value="risks" className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <Card>
                      <CardHeader>
                        <CardTitle>市场风险</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-3">
                          {analysis.risks.marketRisks.map((risk, index) => (
                            <div key={index} className="flex items-start space-x-3">
                              <AlertCircle className="w-4 h-4 text-red-500 mt-1 flex-shrink-0" />
                              <span className="text-sm">{risk}</span>
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>

                    <Card>
                      <CardHeader>
                        <CardTitle>技术风险</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-3">
                          {analysis.risks.technologicalRisks.map((risk, index) => (
                            <div key={index} className="flex items-start space-x-3">
                              <Shield className="w-4 h-4 text-orange-500 mt-1 flex-shrink-0" />
                              <span className="text-sm">{risk}</span>
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </TabsContent>

                <TabsContent value="recommendations" className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <Card>
                      <CardHeader>
                        <CardTitle>进入策略</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-3">
                          {analysis.recommendations.entryStrategy.map((strategy, index) => (
                            <div key={index} className="flex items-start space-x-3">
                              <CheckCircle className="w-4 h-4 text-green-500 mt-1 flex-shrink-0" />
                              <span className="text-sm">{strategy}</span>
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>

                    <Card>
                      <CardHeader>
                        <CardTitle>产品开发</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-3">
                          {analysis.recommendations.productDevelopment.map((dev, index) => (
                            <div key={index} className="flex items-start space-x-3">
                              <Rocket className="w-4 h-4 text-amber-500 mt-1 flex-shrink-0" />
                              <span className="text-sm">{dev}</span>
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </TabsContent>
              </Tabs>

              <div className="flex items-center justify-center gap-4 pt-6">
                <Button variant="outline" className="flex items-center space-x-2">
                  <Download className="w-4 h-4" />
                  <span>下载报告</span>
                </Button>
                <Button variant="outline" className="flex items-center space-x-2">
                  <Share2 className="w-4 h-4" />
                  <span>分享报告</span>
                </Button>
                <Button 
                  onClick={() => {
                    setCurrentStep(1)
                    setAnalysis(null)
                    setFormData({
                      industry: "",
                      analysisScope: "",
                      targetMarket: "",
                      geographicScope: "",
                      competitorList: ""
                    })
                  }}
                  className="bg-amber-500 hover:bg-amber-600"
                >
                  重新分析
                </Button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}